import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import { TitleBar } from "../title-bar";
import { Card } from "../card";
import "./index.scss";
import dataIcon from "../../assets/dataIcon.png";
import { getOssUrl, isIos } from "../../utils";
import { IMemberDistributionChart } from "src/interfaces";

interface StringType {
  [x: string]: string;
}
interface DataType {
  xData: string[];
  target: number[];
  actual: number[];
  icons: StringType;
  names: StringType;
}

type AssignmentsType = {
  type: string;
  originData: IMemberDistributionChart[];
};

export const Assignment = ({ type, originData }: AssignmentsType) => {
  let xData: string[] = [],
    target: number[] = [],
    actual: number[] = [],
    memberType: string[] = [],
    icons = {},
    names = {};
  originData.forEach((item: IMemberDistributionChart, index) => {
    if (item?.nickName?.length > 4) {
      item.nickName = item?.nickName?.slice(0, 2) + "...";
    }
    xData.push(item.nickName);
    target.push(item.total);
    actual.push(item.done);
    icons[index] = getOssUrl({
      bucketName: item?.companyLog?.bucketName,
      path: item?.companyLog?.path,
    });
    names[item.nickName] = index;
    memberType.push(item.memberType);
  });
  // const data: DataType = {
  //   xData: ["永翠", "习天", "干雅", "宋晶蓉", "泮平冰", "泮平冰"],
  //   target: [18, 29, 31, 38, 12, 18, 20, 16, 19],
  //   actual: [8, 15, 12, 17, 4, 4, 15, 12, 11],
  //   icons: {
  //     a: dataIcon,
  //     b: dataIcon,
  //     c: dataIcon,
  //     d: dataIcon,
  //     e: dataIcon,
  //   },
  //   names: {
  //     永翠: "a",
  //     习天: "b",
  //     干雅: "c",
  //     宋晶蓉: "d",
  //     泮平冰: "e",
  //   },
  // };
  // const { icons, names } = data;
  let iconRich: any = {};
  xData.forEach((item: any, index: number) => {
    if (memberType[index] === "out") return;
    const english = names[item];
    iconRich[english] = {
      width: 10,
      height: 10,
      align: "center",
      borderWidth: 1,
      borderColor: "#F6F7F9",
      borderRadius: 2,
      backgroundColor: {
        image: icons[english],
      },
    };
  });
  const option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,0.8)", // 提示框浮层的背景颜色。
      borderWidth: 0, // 提示框浮层的边框宽。
      padding: 12, // 提示框浮层内边距，
      textStyle: {
        // 提示框浮层的文本样式。
        color: "#fff",
        fontWeight: "normal",
        fontSize: 12,
      },
      axisPointer: {
        type: "none",
      },
    },
    color: ["#3972F9", "#DBDEE6"],
    grid: {
      x: 25,
      y: 35,
      x2: 10,
      y2: 0,
      height: 175,
    },
    legend: {
      data: ["全部", "已完成"],
      icon: "rect",
      itemWidth: 8,
      itemHeight: 8,
      left: "left",
      top: "0",
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        axisLabel: {
          formatter: function (value: any) {
            return `${value} {${names[value]}|}`;
          },
          rich: iconRich,
          textStyle: {
            fontSize: 8,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
      },
    ],
    dataZoom: [
      {
        show: true, //为true滚动条出现
        type: "slider", //type:'inside'，滚动条在最下面，鼠标点击滚动
        startValue: 0, // 从头开始。
        endValue: 5, //end百分比显示范围，endValue具体显示几个数值
        height: 8,
        top: 227,
        handleSize: 25,
      },
    ],
    series: [
      {
        name: "已完成",
        type: "bar",
        z: "2",
        barWidth: 24,
        data: actual,
      },
      {
        name: "全部",
        type: "bar",
        z: "1",
        barGap: "-100%",
        barWidth: 24,
        data: target,
      },
    ],
  };

  return (
    <div className="assignment">
      <TitleBar name="成员任务分配图" />
      <Card>
        <ReactEcharts className="assignment-echart" option={option} />
      </Card>
    </div>
  );
};
